<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算和侦听属性</title>
    <script src="js/vue.global.js"></script>
    <style>
        select,option{
            width: 120px;
        }
    </style>
</head>
<body>
<div id="app">
    省份：<select v-model="province">
            <option :value="province.name" v-for="province in province_list">{{province.name}}</option>
        </select>
    城市：<select v-model="city">
            <option :value="city.name" v-for="city in citys">{{city.name}}</option>
    </select>
    地区：<select v-model="area">
        <option :value="area.name" v-for="area in areas">{{area.name}}</option>
    </select>
</div>
<script>
    var vm = Vue.createApp({
        data() {
            return {
                province:"",
                city:"",
                area:"",
                citys:[],
                areas:[],
                province_list:[
                    {"id":1,"name":"湖南省"},
                    {"id":2,"name":"广东省"},
                    {"id":3,"name":"河北省"},
                    {"id":4,"name":"河南省"},
                ],
                city_list:[
                    {"id":5,"name":"长沙市","pid":1},
                    {"id":6,"name":"湘潭市","pid":1},
                    {"id":7,"name":"广州市","pid":2},
                    {"id":8,"name":"深圳市","pid":2},
                    {"id":9,"name":"石家庄市","pid":3},
                    {"id":10,"name":"邯郸市","pid":3},
                    {"id":11,"name":"郑州市","pid":4},
                    {"id":12,"name":"开封市","pid":4},
                ],
                area_list:[
                    {"id":12,"name":"芙蓉区","pid":5},
                    {"id":13,"name":"关心取","pid":5},
                    {"id":14,"name":"B","pid":6},
                    {"id":15,"name":"B","pid":6},
                    {"id":16,"name":"石家庄市","pid":11},
                    {"id":17,"name":"邯郸市","pid":11},
                ],
            }
        },
        //     watch中的所有方法名，是data中或者computed中的变量
        watch: {
            province(){
                // console.log('选择城市。。。。。。。。。。'+this.province)
                let province_id = -1;//初始化，省份id为-1
                for (let key in this.province_list){//in是下标，of是成员
                    if (this.province_list[key].name == this.province){
                        province_id = this.province_list[key].id;
                        break;
                    }
                }

                this.citys = []
                for (let key in this.city_list){
                    if (this.city_list[key].pid  == province_id){
                        this.citys.push(this.city_list[key])
                    }
                }
            },
            city(){
                let city_id = -1;//初始化，城市id为-1
                for (let city of this.city_list){//in是下标，of是成员
                    if (city.name == this.city){
                        console.log(city)
                        city_id = city.id;
                        break;
                    }
                }
                this.areas=[]
                for(let area of this.area_list){
                    if (area.pid == city_id){
                        console.log(area)
                        this.areas.push(area)
                    }
                }
            }
        }
    }).mount("#app")
</script>
</body>
</html>